<template>
	<div class="count-paid">
				<div class="card__header">
					<h4>BDI</h4>
					<p></p>
				</div>
			<v-chart :option="chartOption" autoresize />
				<div class="card__footer">
					<span class="label">转化率</span>
					<span class="value">60%</span>
				</div>
	</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted } from "vue";

const chartOption = reactive({
	grid: {
		left: "10%",
		top: 0,
		right: "10%",
		bottom: 0,
	},
	xAxis: {
		type: "category",
		data: ["00:00", "2:00", "4:00", "6:00", "8:00", "10:00", "12:00", "14:00"],
		boundaryGap: false,
	},
	yAxis: {
		type: "value",
		splitLine: {
			show: false,
		},
		axisTick: {
			show: false,
		},
		axisLine: {
			show: false,
		},
		axisLabel: {
			show: false,
		},
	},
	series: [
		{
			barWidth: 18,
			name: "付款笔数",
			type: "bar",
			data: new Array(8).fill(1).map(() => Math.random() * 50 + 20),
			itemStyle: {
				color: "#4165d7",
			},
		},
		{
			type: "bar",
			barWidth: 18,
			xAxisIndex: 0,
			barGap: "-100%",
			data: [100, 100, 100, 100, 100, 100, 100, 100],
			itemStyle: {
				color: "#f1f1f9",
			},
			zlevel: -1,
		},
	],
});
</script>

<style lang="scss" scoped>
.count-paid {
	.echarts {
		height: 50px;
		width: 100%;
	}

	&__container {
		padding: 0;
	}
}
</style>
